<template>
  <div class="fish-search-chart">
    <div ref="chart" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
// 引入mock API
import { fishRecognitionApi, mockFishRecognitionApi } from "@/api";
export default {
  name: "FishSearchChart",
  setup() {
    const chart = ref(null);

    onMounted(() => {
      initChart();
    });
    const initChart = async () => {
      try {
        // 获取最热搜索排行数据
        const res = await fishRecognitionApi.getHotRanking();
        // 根据API文档，res.data 应为 [{ fishName, searchCount, popularity }, ...]
        const data = res.data || [];

        //test data
        // const data = [
        //   { fishName: "大黄鱼", searchCount: 0, popularity: 373 },
        //   { fishName: "大2鱼", searchCount: 2, popularity: 353 },
        //   { fishName: "大3鱼", searchCount: 6, popularity: 273 },
        // ];

        // 按searchCount降序排序
        data.sort((a, b) => b.searchCount - a.searchCount);
        // 取前7条
        const topData = data.slice(0, 7);
        const yAxisData = topData.map((item) => item.fishName);
        const searchCountData = topData.map((item) => item.searchCount);
        const popularityData = topData.map((item) => item.popularity);
        const myChart = echarts.init(chart.value);
        const option = {
          backgroundColor: "transparent",
          title: {
            show: false,
            text: "最热搜索",
            left: "center",
            textStyle: {
              color: "#fff",
              fontSize: 16,
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            formatter: (params) => {
              return `
                ${params[0].name}<br/>
                今日搜索: ${params[0].value}次<br/>
                热度: ${params[1].value}
              `;
            },
          },
          legend: {
            data: ["今日搜索次数", "热度"],
            right: 20,
            top: 5,
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
          grid: {
            left: "15%",
            right: "5%",
            bottom: "10%",
            top: 40,
          },
          yAxis: {
            type: "category",
            data: yAxisData,
            axisLine: {
              lineStyle: {
                color: "#4a8fe7",
              },
            },
            axisLabel: {
              color: "#fff",
              fontSize: 16,
            },
          },
          xAxis: {
            type: "value",
            name: "搜索次数",
            nameLocation: "middle",
            nameGap: 25,
            nameTextStyle: {
              color: "#fff",
              fontSize: 12,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#4a8fe7",
              },
            },
            axisLabel: {
              color: "#fff",
              fontSize: 16,
            },
            splitLine: {
              lineStyle: {
                color: "rgba(74, 143, 231, 0.2)",
              },
            },
          },
          series: [
            {
              name: "今日搜索次数",
              type: "bar",
              barWidth: "25%",
              data: searchCountData,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  { offset: 0, color: "#1E90FF" },
                  { offset: 1, color: "#00BFFF" },
                ]),
              },
              label: {
                show: true,
                position: "right",
                color: "#fff",
                formatter: "{c}",
              },
            },
            {
              name: "热度",
              type: "bar",
              barWidth: "25%",
              data: popularityData,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  { offset: 0, color: "#32CD32" },
                  { offset: 1, color: "#00FA9A" },
                ]),
              },
              label: {
                show: true,
                position: "right",
                color: "#fff",
                formatter: "{c}",
              },
            },
          ],
        };
        myChart.setOption(option);
        const handleResize = () => {
          myChart.resize();
        };
        window.addEventListener("resize", handleResize);
        
        // 在组件销毁前清理事件监听器
        this.$once('hook:beforeDestroy', () => {
          window.removeEventListener("resize", handleResize);
          myChart.dispose();
        });
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };
    return {
      chart,
    };
  },
};
</script>

<style scoped>
.fish-search-chart {
  width: 100%;
  height: 400px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  bottom: 20px;
}

.chart-container {
  width: 100%;
  height: 100%;
}
</style>
